<template>
	<view class="password-login">
	    <view class="password-login-he">
			<h1>账号密码登录</h1>
	    </view>
	    <view class="password-login-input" :model="form">
			<input-box 
			style="background-color: #FFFFFF;"
			v-model="form.loginName" 
			ref="input1" 
			:verification="['isNull','isPhoneNum']" 
			:verificationTip="['手机号码不能为空','请输入正确的手机号']" 
			placeholder="请输入手机号码" 
			maBtm="10" 
			maxLength="11"></input-box>
			<input-box 
			style="background-color: #FFFFFF;"
			v-model="form.password" 
			ref="input2" 
			type="password"
			:verification="['isNull','isChineseEnlishAndNumber']" 
			:verificationTip="['密码不能为空','']" 
			placeholder="请输入密码" 
			maBtm="10"></input-box>
			<!-- 通过 pattern 进行正则校验 -->
			<!-- <van-field v-model="form.loginName" name="pattern" placeholder="请输入手机号" :rules="[{ pattern, message: '请输入正确手机号' }]"/> -->
			<!-- 通过 validator 进行函数校验 -->
			<!-- <van-field v-model="form.password" type="password" name="validator" placeholder="请输入密码" :rules="[{ required: true, message: '请填写密码' }]"/> -->
			<view style="margin: 16px;">
			  <van-button round block type="info" native-type="submit" @click="login">登录</van-button>
			</view>
	    </view>
	    <view align="left" style="padding:0 1rem">
	      <router-link style="color: dodgerblue;font-size: 0.7rem" :to="{path:'/pages/login/login_index'}">验证码登录</router-link>
	      <view style="float: right;">
	        <!--          <img src="@/image/wv.jpg" style="width: 1rem;height: 1rem;display: inline-block">-->
	        <router-link style="display: inline-block;color: black;font-size: 0.7rem" :to="{path:'/pages/login/retrieve_password'}">忘记密码</router-link>
	      </view>
	    </view>
	  </view>
</template>

<script>
	
	import local from '@/utils/localStorage.js';
	import inputBox from '@/components/input-box/input-box';
	
	export default {
		data() {
			return{
				tel: "",
				password: "",
				pattern: /^1[35789]\d{9}$/,
				// 表单参数
				form: {
					loginName: undefined,
					password: undefined,
				},
			}
		},
		components: {
			inputBox
		},
		methods: {
			toBack(){
				this.$router.go(-1);//返回上一层
			},
			// 登录
			async login(){
				if(this.$refs.input1.getValue() && this.$refs.input2.getValue()){
					const res = await this.$myRequest({
						url:'/api/login/loginPassword',
						method:'post',
						data:this.form,
					});
					if(res.data.code == 200){
						// 存储token
						local.set("token",res.data.token);
						// setToken(res.data.token);
						// console.log(local.get("token"))
						uni.showToast({
							icon:"none",
							title: "登陆成功"
						})
						// 跳转到首页
						uni.switchTab({
							url:'/pages/index/index',
						})
					}else if(res.data.code == 202){
						uni.showToast({
							icon:"none",
							title: res.data.msg,
						})
					}else if(res.data.code == 203){
						uni.showToast({
							icon:"none",
							title: res.data.msg,
						})
					}else{
						uni.showToast({
							icon:"none",
							title: "错误,联系开发人员",
						})
					}
				}
			}
		}
	}
</script>

<style>
.password-login{
    color: black;
  }
  .demo-nav__back{
    position: absolute;
    top: 16px;
    left: 16px;
    width: 20px;
    height: 20px;
    cursor: pointer;
  }
  .password-login-he{
    font-size: 0.8rem;
    padding: 1rem;
    text-align: left;
    margin-top: 30%;
  }
  .password-login-input{
    padding: 1rem;
  }
  .password-login-input .input{
    border-left: 1px solid #ccc;
    background-color: #ebedf0;
    margin: 0.8rem 0;
  }
</style>
